<script>
import GoodsItem from "@/components/goods-item.vue";

export default {
  name: "app",
  components: {GoodsItem},
  data() {
    return {
      title: 'hello vue.js 框架',

      goodsList: [
        {
          'img': 'https://img1.baidu.com/it/u=3957290811,1702441603&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          title: '哇哈哈矿泉',
          oldPrice: 1,
          price: 0.8,
        }, {
          'img': 'https://img1.baidu.com/it/u=2381821115,1481530618&fm=253&fmt=auto&app=120&f=JPEG?w=627&h=470',
          title: '农夫山泉',
          oldPrice: 2,
          price: 1.88,
        }, {
          'img': 'https://img0.baidu.com/it/u=3948084315,1537224532&fm=253&fmt=auto&app=120&f=JPEG?w=350&h=350',
          title: '可口可乐',
          oldPrice: 4,
          price: 3.5,
        }, {
          'img': 'https://img2.baidu.com/it/u=2634669945,3147725235&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
          title: '百事可乐',
          oldPrice: 4,
          price: 3.3,
        }, {
          // 'img': 'https://img2.baidu.com/it/u=2634669945,3147725235&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
          title: '百事可乐',
          oldPrice: 4,
          price: 3.3,
        },
      ]

    }
  },
  // methods 自定义普通方法， 没有缓存功能，每次调用都会重新计算， 不管数据是否改变。
  methods: {
    clickTitle() {
      alert('hello Sir')
    },

    //   getTotalAmount() {
    //     return this.goodsAmount + this.yunFei
    //   },
    //
    //   getFulName() {
    //     return this.firstName + "-" + this.lastName
    //   },
  },
  // computed是计算自定义方法， 具有缓存功能。 它的宜依赖属性改变时，才会进行重新计算。 如果数据没有改变，它不会重新计算。
  computed: {
    // fulName() {
    //   return this.firstName + "=" + this.lastName
    // },
    // totalAmount(){
    //   return this.goodsAmount+this.yunFei
    // },
  }
}
</script>

<template>
  <h1 v-on:click="clickTitle">{{ title }}</h1>

  <goods-item v-for="(item, index) in goodsList" :key="item" :info="item">

    <template v-slot:top-right>
      <img v-if="index===0" width="30px" height="30px" src="https://img0.baidu.com/it/u=309054097,1007137559&fm=253&fmt=auto&app=138&f=GIF?w=563&h=500">
    </template>

    <template v-slot:button>
      <img width="30px" height="30px"
           src="https://img0.baidu.com/it/u=309054097,1007137559&fm=253&fmt=auto&app=138&f=GIF?w=563&h=500">
    </template>

  </goods-item>
  <!--  :goods-name="item.title" :img-url="item.img"-->
  <!--  :price="item.price" :oldPrice="item.oldPrice"-->

  <!--  <h1> 总价：{{ getTotalAmount() }}</h1>-->
  <!--  <h1> 总价：{{ totalAmount }}</h1>-->

  <!--  <h1>{{ getFulName() }}</h1>-->
  <!--  <h1>{{fulName}}</h1>-->
</template>

<style scoped>

</style>